<template>
    <div class="content">
        <div class="top-img">
            <img src="http://res.4008823823.com.cn/kfcios/Html/jsp/app/images/background.png">
        </div>
        <div class="phone">
            <div class="phone-left">
                <img src="http://res.4008823823.com.cn/kfcios/Html/jsp/app/images/phone_demo.png">
            </div>
            <div class="phone-right">
                <div class="right-one">
                    点肯德基宅急送就用肯德基超级APP
                </div>
                <div class="right-two">
                    全新肯德基官方APP 开启自在模式！
                </div>
                <div class="right-three">
                    <div class="three-one">
                        <img src="http://res.4008823823.com.cn/kfcios/Html/jsp/app/images/red_draw.png">外卖点餐
                    </div>
                    <div  class="three-two">
                        <img src="http://res.4008823823.com.cn/kfcios/Html/jsp/app/images/red_draw.png">会员积分
                    </div>
                    <div  class="three-three">
                        <img src="http://res.4008823823.com.cn/kfcios/Html/jsp/app/images/red_draw.png">更多优惠券
                    </div>
                </div>
                <div class="right-four">
                    <div class="load-phone">
                        <div class="iphone">
                            <img src="http://res.4008823823.com.cn/kfcios/Html/jsp/app/images/iphone_download.png">
                        </div>
                        <div class="android">
                            <img src="http://res.4008823823.com.cn/kfcios/Html/jsp/app/images/andriod_download.png">
                        </div>
                    </div>
                    <div class="load-scan">
                        <img src="http://res.4008823823.com.cn/kfcios/Html/jsp/app/images/two-bar-codes.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'MobileDown'
}
</script>

<style lang="stylus" scoped>
    .content
      display : flex
      flex-wrap: wrap
      width: 20rem
      height: 12rem
      margin: 0 auto
      .top-img
        display: flex
        margin-left: 16rem
        width: 3.34rem
        height: 2.8rem
    .phone
      display: flex
      width: 18rem
      height: 11rem
      margin-top: -3rem
      .phone-left
        height: 11rem
        width: 8.8rem
      .phone-right
        height: rem
        width: 9.2rem
        .right-one
          width: 8rem
          height: 2rem
          margin-left: 1rem
          margin-top: 2.5rem
          font-size: 42px
          color: red
          line-height: 1rem
        .right-two
          width: 5.9rem
          height: .6rem
          font-size: 18px
          margin-left: 1rem
          margin-top: .2rem
        .right-three
          width: 6rem
          height: .6rem
          display: flex
          font-size: 18px
          margin-left: 1rem
          margin-top: .1rem
          color: red
          justify-content: space-around
        .right-four
          width: 7rem
          height: 2.6rem
          display: flex
          flex-wrap: wrap
          margin-left: 1rem
          margin-top: .5rem
          .load-phone
            width: 3.8rem
            height: 2.6rem
            .android
              margin-top: .8rem
          .load-scan
            margin-left: .5rem
</style>
